<script>
    var current_cell;
    $(document).ready(function(){
		
        initTable();
        list_user = $('#list_service').dataTable({
            //"sScrollX": "80%",
            //"sScrollXInner": "100%",
                        
            "bFilter" : true,
            "bJQueryUI" : true,
            "sPaginationType": "full_numbers",
            "oLanguage": {
                "sLengthMenu": "Menampilkan _MENU_ data",
                "sZeroRecords": "tidak ada kamar",
                "sInfoFiltered": "(Hasil filter dari _MAX_ yang didapat)"
            }
        });
        $('#list_service tbody tr').live('click',function(){
            var aData = list_user.fnGetData(this);
            var kamar_id = aData[1];
            var bulan = parseInt($("#month-selector").val());
            $.get("<?php echo KAMAR ?>get_kamar", "kamar="+kamar_id+"&&tanggal="+current_cell+"&&bulan="+(bulan+1), function(data){
                var arr = $.parseJSON(data);
                $("#nama-kamar").text(arr['nama_kamar']);
                $("#harga-kamar").text(arr['harga']);
                $("#status-kamar").text(arr['status_huni']);
                $("#kapasitas-kamar").text(arr['kapasitas']);
                $("#kredit-kamar").text(arr['limit_kredit']);
                $("#kategori-kamar").text(arr['kategori_kamar']);
                $('#info-kamar').empty();
                $('#info-user').empty();
                if(arr['status']=="free")
                {
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>pesan_kamar?kamar_id='+ arr['id_kamar'] +'&&tanggal='+ current_cell +'&&bulan='+ $("#month-selector").val() +'">Pesan</a> ');
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>checkin_kamar/'+arr['cust_id']+'?kamar_id='+ arr['id_kamar'] +'&&tanggal='+ current_cell +'&&bulan='+ $("#month-selector").val() +'">Check In</a>');
                }
                else if (arr['status']=="pesan")
                {
                    $('#info-user').append("<h3>PEMESAN</h3>");
                    $('#info-user').append("Nama :"+arr['data_customer'][0]['first_name']+" "+arr['data_customer'][0]['last_name'] +"<br />");
                    $('#info-user').append("<h3>WAITING LIST</h3><ol>");
                    for(var i=0;i<arr['waiting_list'].length;i++)
                    {
                        $('#info-user').append((i+1)+"<li>Nama :"+arr['waiting_list'][i]['first_name']+" "+arr['waiting_list'][i]['last_name'] +"</li>");
                    }
                    $('#info-user').append("</ol>");
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>waitinglist_kamar/'+arr['cust_id']+'?kamar_id='+ arr['id_kamar'] +'&&tanggal='+ current_cell +'&&bulan='+ $("#month-selector").val() +'">Waiting list</a> ');
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>checkin_kamar/'+arr['cust_id']+'?kamar_id='+ arr['id_kamar'] +'&&tanggal='+ current_cell +'&&bulan='+ $("#month-selector").val() +'">Check in</a> ');
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>deposit_kamar/'+arr['cust_id']+'">Deposit</a> ');
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>cancel_kamar/'+arr['cust_id']+'?kamar_id='+ arr['id_kamar'] +'">Cancel</a>');
                }
                else if (arr['status']=="checked in")
                {
                    $('#info-user').append("histori transaksi<br />");
                    var total_trax= 0;
                    for(var i=0;i<arr['trax_list'].length;i++)
                    {
                        if(arr['trax_list'][i]['jenis_trax'] == "deposit")
                            total_trax += parseInt(arr['trax_list'][i]['harga_trax']);
                        else
                            total_trax -= arr['trax_list'][i]['harga_trax'];

                        $('#info-user').append((i+1)+") "+ arr['trax_list'][i]['nama_trax'] +" | "+ arr['trax_list'][i]['jenis_trax'] +" | "+ arr['trax_list'][i]['harga_trax'] +" | "+ arr['trax_list'][i]['keterangan'] +"<br />");
                    }
                    $('#info-user').append("total: "+ total_trax +"<br />");
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>checkout_kamar/'+arr['cust_id']+'?kamar_id='+ arr['id_kamar'] +'&&tanggal='+ current_cell +'&&bulan='+ $("#month-selector").val() +'">Check out</a> ');
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>deposit_kamar/'+arr['cust_id']+'">Deposit</a> ');
                    $('#info-kamar').append('<a class="tombolsign" href="<?php echo HOME ?>transaksi_kamar/'+arr['cust_id']+'">Transaksi</a> ');
                }
                    
                //$("#hidden-current-kamar").val() = arr['id'];
                //                   alert(current_cell);
            }
        );
        });
        $('#list_service tbody tr td').live('click',function(){
            current_cell = this.firstChild.data;
            //                 alert(this.firstChild.data);
                 
        });
        $("#month-selector").change(function() {
            month_change();
            list_user.fnDraw();
        })
    });
    function daysInMonth(iMonth, iYear)	{
        return 32 - new Date(iYear, iMonth, 32).getDate();
    }
    function initTable()
    {
        var tanggal = new Date();
        var month = tanggal.getMonth();
        $("#month-selector").val(month).attr('selected',true);
        var year = tanggal.getYear();
        var JumlahHari = daysInMonth(month, year);
        $.post("<?php echo KAMAR ?>get_all_kamar", null, function(data){
            var arr = $.parseJSON(data);
            var JumlahKamar = arr.length;
            for(var i = 0;i<JumlahHari;i++)
                $("#header-tabel").append("<th width='100'>"+(i+1)+"</th>");
            for(var i = 0;i<JumlahKamar;i++)
            {
                            
                for(var j = 0;j<JumlahHari;j++)
                {
                    jQuery.ajax({
                        url:    "<?php echo KAMAR ?>get_status_kamar"
                            + '?kamar=' 
                            + arr[i]['id_kamar']+"&&tanggal="+(j+1)+"&&bulan="+(month+1)+"&&id="+i,
                        success: function(data2) {
                            var arr2 = $.parseJSON(data2);
                            //                                        alert(arr2['id']);
                            if(arr2['status']=="free")
                                $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: green'>"+arr2['tanggal']+"</td>");
                            if(arr2['status']=="pesan"){
                                //                                                        alert(arr2['status']);
                                $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: yellow'>"+arr2['tanggal']+"</td>");
                            }if(arr2['status']=="checked in")
                                $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: red'>"+arr2['tanggal']+"</td>");
                            if(arr2['status']=="checked out")
                                $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: blue'>"+arr2['tanggal']+"</td>");
                        },
                        async:   false
                    });
                }
            }
        }
    );
            
    }
        
    function month_change()
    {
        var tanggal = new Date();
        var month = parseInt($("#month-selector").val());
        var year = tanggal.getYear();
        var JumlahHari = daysInMonth(month, year);
        var JumlahKamar = <?php echo count($list_kamar) ?>;
        $("#header-tabel").empty();
        $("#header-tabel").append("<th width='50'>Nama Kamar</th>");
            
            
            $.post("<?php echo KAMAR ?>get_all_kamar", null, function(data){
                    var arr = $.parseJSON(data);
                    var JumlahKamar = arr.length;
                    for(var i = 0;i<JumlahHari;i++)
                        $("#header-tabel").append("<th width='100'>"+(i+1)+"</th>");
                    for(var i = 0;i<JumlahKamar;i++)
                        {
                            $("#kamar-"+i).empty();
                            $("#kamar-"+i).append("<td align='center' >"+arr[i]['kategori_kamar']+"</td>");
                            $("#kamar-"+i).append("<td align='center' >"+arr[i]['nama_kamar']+"<input type='hidden' value='"+arr[i]['id_kamar']+"'</a></td>");
                            for(var j = 0;j<JumlahHari;j++)
                                {
                                    jQuery.ajax({
                                        url:    "<?php echo KAMAR ?>get_status_kamar"
                                                + '?kamar=' 
                                                + arr[i]['id_kamar']+"&&tanggal="+(j+1)+"&&bulan="+(month+1)+"&&id="+i,
                                        success: function(data2) {
                                                    var arr2 = $.parseJSON(data2);
//                                                    alert(month+1);
                                                    if(arr2['status']=="free")
                                                        $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: green'>"+arr2['tanggal']+"</td>");
                                                    if(arr2['status']=="pesan"){
//                                                        alert(arr2['status']);
                                                        $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: yellow'>"+arr2['tanggal']+"</td>");
                                                    }
                                                    if(arr2['status']=="checked in")
                                                        $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: red'>"+arr2['tanggal']+"</td>");
                                                    if(arr2['status']=="checked out")
                                                        $("#kamar-"+arr2['id']).append("<td align='center' style='background-color: blue'>"+arr2['tanggal']+"</td>");
                                                },
                                        async:   false
                                    });
                                }
                        }
                });
		}
            
            
</script>
<style>
    th{
        cursor: pointer;
    }
    td{
        cursor: pointer;
    }
    th .ui-icon {
        display :none;
    }
</style>
<div style="width : 700px;margin : 0 auto;">
    <select name="month" id="month-selector">
        <option value="0">Januari</option>
        <option value="1">Februari</option>
        <option value="2">Maret</option>
        <option value="3">April</option>
        <option value="4">Mei</option>
        <option value="5">Juni</option>
        <option value="6">Juli</option>
        <option value="7">Agustus</option>
        <option value="8">September</option>
        <option value="9">Oktober</option>
        <option value="10">November</option>
        <option value="11">Desember</option>
    </select>
    
    <a href="<?php echo HOME."form_customer" ?>">check out</a>
<table id="list_service" width="700" border="0" cellspacing="0">
	<thead>
            <tr id="header-tabel">
			<th width="50">Kategori Kamar</th>
                        <th width="50">Nama Kamar</th>
		</tr>
	</thead>
	<tbody>
		<?php for ($i = 0; $i < count($list_kamar); $i++) { ?>
			<tr id="kamar-<?php echo $i ?>">
                            <td align="center" ><?php echo $list_kamar[$i]['kategori_kamar'] ?></td>
                            <td align="center" ><?php echo $list_kamar[$i]['nama'] ?><input type='hidden' value='<?php echo $list_kamar[$i]['id'] ?>' /></a></td>
			</tr>
		<?php } ?>
	</tbody>
</table>
<table width="150px">
	<tr>
		<td bgcolor="red" width="20px">&nbsp;</td>
		<td>Checked in</td>
	</tr>
	<tr>
		<td bgcolor="yellow">&nbsp;</td>
		<td>Sudah Dipesan</td>
	</tr>
	<tr>
		<td bgcolor="green">&nbsp;</td>
		<td>Available</td>
	</tr>
	<tr>
		<td bgcolor="blue">&nbsp;</td>
		<td>Checked out</td>
	</tr>
</table>    
<h3>INFORMASI KAMAR</h3>
	<table width="650px" cellspacing="0">
	<tr>
		<td class="right" width="20%">Kategori kamar</td>
		<td class="left" width="30%">: <b id="kategori-kamar"></b></td>
		<td rowspan="6" style="border-left:solid 1px;padding-left:10px;">
			<div id="info-kamar">
			<input type="hidden" id="hidden-current-cell" />
			</div><br />
		    <div id="info-user"></div>
		</td>
	</tr>
	<tr>
		<td class="right">Nama kamar</td>
		<td class="left">: <b id="nama-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Harga</td>
		<td class="left">: <b id="harga-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Kapasitas</td>
		<td class="left">: <b id="kapasitas-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Status huni</td>
		<td class="left">: <b id="status-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Limit kredit</td>
		<td class="left">: <b id="kredit-kamar"></b></td>
	</tr>
	</table>
</div>